<template>
  <el-card>
    <div slot="header" class="sales-header">
      <el-tabs v-model="saleOrVisit">
        <el-tab-pane label="销售额" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visited"></el-tab-pane>
      </el-tabs>
      <div style="float: right;" class="sale-header-right">
        <span :class="{ active: setActive === 'day' }" @click="setDay">
          今日
        </span>
        <span :class="{ active: setActive === 'week' }" @click="setWeek">
          本周
        </span>
        <span :class="{ active: setActive === 'month' }" @click="setMonth">
          本月
        </span>
        <span :class="{ active: setActive === 'year' }" @click="setYear">
          本年
        </span>
        <el-date-picker
          v-model="date"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          class="sale-date-picker"
        ></el-date-picker>
      </div>
    </div>
    <div class="sales-body">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="16" :lg="18">
          <div class="chart" ref="chart"></div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6">
          <div>
            <h5>门店{{ title }}排名</h5>
            <ul class="sale-order">
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep">
                    1
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep">
                    2
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep">
                    3
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep sale-order-light">
                    4
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep sale-order-light">
                    5
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep sale-order-light">
                    6
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
              <li class="sale-order-li">
                <p>
                  <span class="sale-order-deep sale-order-light">
                    1
                  </span>
                  <span>工专路 0 号店</span>
                </p>
                <span>323,234</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import * as echart from 'echarts'
import dayjs from 'dayjs'
import resize from '@/mixins/resize'
export default {
  name: 'Sales',
  data() {
    return {
      saleOrVisit: 'sale',
      // 得到的是数组
      date: '',
      setActive: ''
    }
  },
  mixins: [resize],
  mounted() {
    this.myEchart = echart.init(this.$refs.chart)
    this.myEchart.setOption({
      title: {
        text: this.title + '趋势',
        textStyle: {
          fontSize: '16',
          fontWeight: 'normal'
        }
      },
      xAxis: {
        type: 'category',
        boundarGap: '10%',
        // axisTick: {
        //   alignWithLabel: true
        // },
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'
        ]
      },
      yAxis: {},
      series: [
        {
          name: '直接访问',
          type: 'bar',
          barWidth: '20',
          data: [23, 14, 42, 43, 23, 12, 43, 4, 61, 27, 23, 51]
        }
      ],
      tooltip: {
        show: true,
        trigger: 'axis',
        // axisPointer: {
        //   // 坐标轴指示器，坐标轴触发有效
        //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        // }
        //设背景是影子不可以设置大小需要设置为
        axisPointer: {
          type: 'line',
          // 当影子效果来使用
          lineStyle: {
            width: '30',
            type: 'solid',
            color: 'rgba(180,180,180,.15)'
          }
        }
      },
      //
      grid: {
        left: "30",
        right: 0
      }
    })
    //监听浏览器窗口的变化，让图片也变自适应
  },
  computed: {
    title() {
      return this.saleOrVisit === 'sale' ? '销售额' : '访问量'
    }
  },
  watch: {
    saleOrVisit(value) {
      // 默认是不合并setOption,还有缓存效果
      this.myEchart.setOption({
        title: {
          text: this.title + '趋势'
        }
      })
    }
  },
  methods: {
    setDay() {
      this.setActive = 'day'
      let start = dayjs().format('YYYY-MM-DD')
      let end = dayjs().format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setWeek() {
      this.setActive = 'week'
      let start = dayjs()
        .startOf('week')
        .format('YYYY-MM-DD')
      let end = dayjs()
        .endOf('week')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    // 获取本月
    setMonth() {
      this.setActive = 'month'
      let start = dayjs()
        .startOf('month')
        .format('YYYY-MM-DD')
      let end = dayjs()
        .endOf('month')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    },
    setYear() {
      this.setActive = 'year'
      let start = dayjs()
        .startOf('year')
        .format('YYYY-MM-DD')
      let end = dayjs()
        .endOf('year')
        .format('YYYY-MM-DD')
      this.date = [start, end]
    }
  }
}
</script>

<style scoped>
.sales-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sale-header-right {
  font-size: 14px;
}
.sale-header-right > span {
  margin-left: 10px;
}
.sale-header-right > span.active {
  color: #409eff;
}
.sale-date-picker {
  width: 250px;
  margin-left: 10px;
}
/* .sales-body{
 display: flex;
 justify-content: space-between;
} */
.chart {
  width: 100%;
  height: 300px;
}
h5 {
  font-size: 14px;
  font-weight: normal;
}
.sale-order {
  list-style: none;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.sale-order-li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sale-order-deep {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #314659;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}
.sale-order-light {
  background-color: rgba(180, 180, 180, 0.2);
  color: #314659;
}
</style>
